<%--
  Created by IntelliJ IDEA.
  User: yiliu
  Date: 2017/8/31
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" type="text/css" href="js/themes/default/tree.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">

<div class="row">
    <div class="col-xs-12">

        <div class="easyui-panel" style="padding:5px">
            <ul class="easyui-tree" data-options="url:'page/user/tree_data1.json',method:'get',loadFilter:myLoadFilter"></ul>
        </div>
         <%-- <div class="easyui-panel" style="padding:5px">
                <ul class="easyui-tree">
                    <li>
                        <span>My Documents</span>
                        <ul>
                            <li data-options="state:'closed'">
                                <span>Photos</span>
                                <ul>
                                    <li>
                                        <span>Friend</span>
                                    </li>
                                    <li>
                                        <span>Wife</span>
                                    </li>
                                    <li>
                                        <span>Company</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span>Program Files</span>
                                <ul>
                                    <li>Intel</li>
                                    <li>Java</li>
                                    <li>Microsoft Office</li>
                                    <li>Games</li>
                                </ul>
                            </li>
                            <li>index.html</li>
                            <li>about.html</li>
                            <li>welcome.html</li>
                        </ul>
                    </li>
                </ul>
            </div>--%>
        <script>
            function myLoadFilter(data, parent){
                var state = $.data(this, 'tree');

                function setData(){
                    var serno = 1;
                    var todo = [];
                    for(var i=0; i<data.length; i++){
                        todo.push(data[i]);
                    }
                    while(todo.length){
                        var node = todo.shift();
                        if (node.id == undefined){
                            node.id = '_node_' + (serno++);
                        }
                        if (node.children){
                            node.state = 'closed';
                            node.children1 = node.children;
                            node.children = undefined;
                            todo = todo.concat(node.children1);
                        }
                    }
                    state.tdata = data;
                }
                function find(id){
                    var data = state.tdata;
                    var cc = [data];
                    while(cc.length){
                        var c = cc.shift();
                        for(var i=0; i<c.length; i++){
                            var node = c[i];
                            if (node.id == id){
                                return node;
                            } else if (node.children1){
                                cc.push(node.children1);
                            }
                        }
                    }
                    return null;
                }

                setData();

                var t = $(this);
                var opts = t.tree('options');
                opts.onBeforeExpand = function(node){
                    var n = find(node.id);
                    if (n.children && n.children.length){return}
                    if (n.children1){
                        var filter = opts.loadFilter;
                        opts.loadFilter = function(data){return data;};
                        t.tree('append',{
                            parent:node.target,
                            data:n.children1
                        });
                        opts.loadFilter = filter;
                        n.children = n.children1;
                    }
                };
                return data;
            }
        </script>

        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div>

<%--
<script type="text/javascript" src="js/jquery.min.js"></script>
--%>
<script type="text/javascript" src="js/jquery.tree.js"></script>
<script type="text/javascript" src="js/easyloader.js"></script>

